<template>
  <!-- 学习中心 -->
  <div class="wrap">
    <div class="con">
      <div class="tabLeft">
        <ul>
          <li :class="tabNum == 0 ? 'seleTabCompanyPro pseudo' : 'tabCompanyPro'" @click="tabSwitch(0)">企业介绍</li>
          <li :class="tabNum == 1 ? 'seleTabMentorData pseudo' : 'tabMentorData'"  @click="tabSwitch(1)">导师信息</li>
          <li :class="tabNum == 2 ? 'seleTabTasks pseudo' : 'tabTasks'" @click="tabSwitch(2)">发布任务</li>
          <li :class="tabNum == 3 ? 'seleTabAssess pseudo' : 'tabAssess'" @click="tabSwitch(3)">考核情况</li>
          <li  :class="tabNum == 4 ? 'seleTabJobDescription pseudo' : 'tabJobDescription'" @click="tabSwitch(4)">职位介绍</li>
          <li  :class="tabNum == 5 ? 'seleTabExaminers pseudo' : 'tabExaminers'"  @click="tabSwitch(5)">考核人员</li>
        </ul>
      </div>
      <div class="tabRight">
        <!-- 企业介绍 -->
        <div class="companyProCon" v-if="tabNum == 0">
          <h2>企业介绍</h2>
        </div>
        <!-- 导师信息 -->
        <div class="mentorDataCon" v-if="tabNum == 1">
          <h2>导师信息</h2>
          <span>姓名:</span>
          <p>张三</p>
          <span>企业职位:</span>
          <p>总经理</p>
          <span>邮箱:</span>
          <p>999999@qq.com</p>
          <span>联系电话：</span>
          <p>13333333333</p>
          <span>擅长技术：</span>
          <p> <br /></p>
          <span>项目履历概要：</span>
          <p> <br /><br /> <br /></p>
        </div>
        <!-- 发布任务 -->
        <div class="tasksCon" v-if="tabNum == 2">
          <h2>发布项目学习任务</h2>
          <span>项目名称:</span>
          <p> <br /></p>
          <span>项目介绍:</span>
          <p> <br /><br /><br /></p>
          <span>项目需求:</span>
          <p> <br /><br /> <br /></p>
          <span>领取任务懒币数量:</span>
          <p> <br /> </p>
          <span>挂钩导师:</span>
          <div class="choose"  @click="hookChoose()">
                <div class="choose1">
                  <span>指导和查询</span>
                    <div class="box1"></div> 
                    <img src="../assets/hook.png" alt="" :class="state ? 'choose1 hook1' : 'choose1 nonehook'">
                </div>
            </div>
          <p><br /></p>
          <el-button type="primary">发布</el-button>
        </div>
        <!-- 考核情况 -->
        <div class="assessCon" v-if="tabNum == 3">
          <h2>参加任务人员以及完成情况</h2>
                <span>任务名称</span>
                <span>截止日期</span>
                <span>任务进度</span>
                <span>任务评价</span>
                <hr>
            <ul >
                <li v-for="(table,index) in tableData" :key="table.id"> 
                  <P>{{table.name}}</P>
                  <P>{{table.date}} </P>
                  <P>{{table.address}}</P>
                  <P :class="table.access === '优' ? ' styleRed' : 'styleBlack'"> {{table.access}} </P>
                  <P class="liBtn">
                    <el-button type="warning" class="btn"  v-if="table.access === ''" @click="evalua(index)">点评</el-button>
                    <el-button type="danger" class="btn" v-else @click="evalua(index)">修改</el-button>
                  </P>
                </li>
            </ul>

          <el-dialog title="任务评价" :visible.sync="dialogFormVisible">
            <el-form :model="form" closed="xiugai">
              <el-form-item label="评价级别:" :label-width="formLabelWidth"> <br />
                <div class="access">
                    <div class="access1">
                      <div class="accessBox" @click="hookaccess(0)"></div> 
                      <img src="../assets/hook.png" alt="" :class=" hook === 0 ? 'access1 hookExcellent' : 'access1 nonehook'">
                      <div class="you">{{tableAccess[0]}}</div>
                    </div>
                    <div class="access2" >
                      <div class="accessBox" @click="hookaccess(1)"></div>
                      <img src="../assets/hook.png" alt="" :class=" hook === 1 ? 'access1 hook2' : 'access1 nonehook'">
                      <div class="liang">{{tableAccess[1]}}</div>
                    </div>
                    <div class="access3" >
                      <div class="accessBox" @click="hookaccess(2)"></div>
                      <img src="../assets/hook.png" alt="" :class=" hook === 2 ? 'access1 hook3' : 'access1 nonehook'">
                      <div class="cha">{{tableAccess[2]}}</div>
                    </div>
                </div>
              </el-form-item>
              <el-form-item label="评语:" :label-width="formLabelWidth"><br />
                <p class="accessP"> <br /><br /></p>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="modify()" >确 定</el-button>
            </div>
          </el-dialog>

        </div>
        <!-- 职位介绍 -->
        <div class="jobDescriptionCon" v-if="tabNum == 4">
          <div class="jobDesHome" v-if="pageNum == 0">
            <h2>职业介绍</h2>
            <ul>
              <li @click="pageTurn(1)">
                <p>职位对应能力要求</p>
              </li>
              <li>
                <p>关联企业审核导师</p>
              </li>
              <li @click="pageTurn(2)">
                <p>发布职位需求</p>
              </li>
            </ul>
          </div>

          <!-- jobDescriptionCon 页面内的跳转 -->
          <div class="jobAbiltyRer" v-if="pageNum == 1">
            <h2>职业介绍</h2>
            <span>职位对应能力需求</span>
            <p> <br /></p>
            <span>项目名称:</span>
            <p> <br /></p>
            <span>技术需求概述:</span>
            <p> <br /><br /><br /> <br /></p>
            <span>标准描述:</span>
            <p> <br /><br /><br /><br /><br /></p>
            <div>
              <el-button type="warning" @click="pageTurn(0)">返回上一级</el-button>
            </div>
          </div>
          <div class="jobRer" v-if="pageNum == 2">
            <h2>职业介绍</h2>
            <span>职位需求</span>
            <p>
              <br />
            </p>
            <span>职位名称:</span>
            <p>
              <br />
            </p>
            <span>需求人数:</span>
            <p>
              <br />
            </p>
            <span>岗位要求:</span>
            <p>
              <br />
              <br />
              <br />
              <br />
              <br />
            </p>
            <el-button type="primary">发布</el-button>
            <div>
              <el-button type="warning" @click="pageTurn(0)">返回上一级</el-button>
            </div>
          </div>
        </div>
        <!-- 考核人员 -->
        <div class="examinersCon" v-if="tabNum == 5">
          <h2>考核人员:</h2>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="项目名称" width></el-table-column>
            <el-table-column prop="name" label="负责人" width></el-table-column>
            <el-table-column prop="address" label="开发进展"></el-table-column>
            <el-table-column label="查看代码">
              <el-button type="warning" size="mini">查看</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-checkbox></el-checkbox>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tabNum: 0,
      state:false,
      // 优良差评定
       hook: '',
      pageNum: 0,
      tableData: [
        {
          id:0,
          name: "建立购物网站",
          date: "2019-08-11",
          address: "进行中",
          access: "优"
        },
        {
            id:1,
            name: "建立购物网站",
            date: "2019-08-11",
            address: "进行中",
            access: "优"
        },
        {
            id:2,
            name: "建立购物网站",
            date: "2019-08-11",
            address: "进行中",
            access: "优"
        },
        {
            id:3,
          name: "建立购物网站",
          date: "2019-08-11",
          address: "进行中",
          access: "优"
        },
        {
            id:4,
          name: "建立购物网站",
          date: "2019-08-11",
          address: "进行中",
          access: "优"
        },
        {
            id:5,
          name: "建立购物网站",
          date: "2019-08-11",
          address: "进行中",
          access: ""
        },
        {
            id:6,
          name: "建立购物网站",
          date: "2019-08-11",
          address: "进行中",
          access: "优"
        }
      ],
      tableAccess: [
        '优','良','差'
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      radio: " ",
      idx: null
    };
  },

  methods: {
    tabSwitch(num) {
      this.tabNum = num;
    },
    pageTurn(num) {
      this.pageNum = num;
    },

    //点评事件
    evalua(index){
        this.dialogFormVisible = true;
        this.idx = index;
    },

    modify() {
        this.dialogFormVisible = false;
        // console.log(this.radio);
        this.tableData[this.idx].access = this.tableAccess[this.hook];

    },
    // 勾选按钮
    hookChoose() {
            this.state = !this.state;
        },

    // 优良差按钮点击切换
    hookaccess(num) {
      this.hook = num
    }


  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
}

.con {
  display: flex;
  width: 1200px;
  margin: 20px auto 0;
  box-shadow: 1px 3px 9px #ddd;
  border-radius: 10px;
}

.tabLeft li {
  position: relative;
  width: 210px;
  padding-left: 25px;
  line-height: 85px;
  font-size: 21px;
  color: #b3bdc9;
  text-align: center;
  list-style-type: none;
}

.tabRight {
  width: 100%;
  background-color: #fff;
}

.tabCompanyPro {
  background: url("../assets/企业.png") 50px center no-repeat;
  background-size: 26px 28px;
}

.seleTabCompanyPro {
  color: #0087cf !important;
  background: #fff url("../assets/企业(1).png") 50px center no-repeat;
  background-size: 26px 28px;
}

.tabMentorData {
  background: url("../assets/资料-1.png") 50px center no-repeat;
  background-size: 25px 30px;
}

.seleTabMentorData {
  color: #0087cf !important;
  background: #fff url("../assets/资料.png") 50px center no-repeat;
  background-size: 25px 30px;
}

.tabTasks {
  background: url("../assets/发布.png") 50px center no-repeat;
  background-size: 27px 27px;
}

.seleTabTasks {
  color: #0087cf !important;
  background: #fff url("../assets/发布-1.png") 50px center no-repeat;
  background-size: 27px 27px;
}

.tabAssess {
  background: url("../assets/考核情况.png") 50px center no-repeat;
  background-size: 26px 23px;
}

.seleTabAssess {
  color: #0087cf !important;
  background: #fff url("../assets/考核情况2.png") 50px center no-repeat;
  background-size: 26px 23px;
}

.tabJobDescription {
  background: url("../assets/职位.png") 50px center no-repeat;
  background-size: 26px 23px;
}

.seleTabJobDescription {
  color: #0087cf !important;
  background: #fff url("../assets/职位-1.png") 50px center no-repeat;
  background-size: 26px 23px;
}

.tabExaminers {
  background: url("../assets/人员.png") 50px center no-repeat;
  background-size: 26px 28px;
}

.seleTabExaminers {
  color: #0087cf !important;
  background: #fff url("../assets/人员-1.png") 50px center no-repeat;
  background-size: 26px 28px;
}

.pseudo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  width: 8px;
  height: 85px;
  background-color: #0087cf;
}

.tabRight {
  padding: 30px 25px;
}

.tabRight h2 {
  font-weight: 500;
  font-size: 28px;
  margin-bottom: 18px;
}

.CompanyProCon span,
.mentorDataCon span,
.jobRer span,
.jobAbiltyRer span {
  font-size: 23px;
  color: #5e5e5e;
  line-height: 50px;
}

.CompanyProCon p,
.mentorDataCon p,
.tasksCon p {
  width: 300px;
  margin-bottom: 15px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #f2f6f7;
  color: #5e5e5e;
}

.jobRer p {
  width: 300px;
  margin-bottom: 15px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #f2f6f7;
  color: #5e5e5e;
}

.jobAbiltyRer p {
  width: 300px;
  margin-bottom: 15px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #f2f6f7;
  color: #5e5e5e;
}

.jobDescriptionCon li:hover {
  cursor: pointer;
}

/* .tasksCon div {
  font-size: small;
  margin-left: 17%;
} */

.assessCon {
  width: 100%;
}



.jobDescriptionCon li {
  line-height: 50px;
  font-size: 23px;
  color: #156beb;
  text-align: left;
  list-style-type: disc;
  margin-left: 2%;
}

.jobDescriptionCon li p {
  width: 300px;
  margin-bottom: 15px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #fff;
  color: #000;
}

.jobAbiltyRer div,
.jobRer div {
  float: right;
  margin-top: 5%;
}

.assessCon span {
    font-size: 23px;
    width: 19%;
    text-align: center;
    margin-right: 0%;
    padding-left: 0%; 
    color: #0087cf;
    display: inline-block;
}

hr {
    background-color: #0087cf;
    height: 3px;
}



.assessCon  ul {
    width: 100%;
}


.assessCon ul li P {
    width: 18%;
    display: inline-block;
    line-height: 50px;
    list-style: none;
    font-size: 18px;
    text-align: center;
    margin-left: 1%;
}


.accessP {
    width: 100%;
    margin-bottom: 15px;
    height: 200px;
    background-color: #f2f6f7;
    color: #5e5e5e; 
}

.styleRed {
  color: #ff0000;
}

.styleBlack {
  color: #000;
}

/* 按钮 */
.choose{
  font-size: smaller;
    position: relative;
    width: 150px;
    height: 25px;
    margin-left: 27%;
    margin-top: -2%;
    
  }
  .choose1 {
    float: left;
    width: 100px;
    height: 50px;
    border-radius: 5px;
    margin-left: 0%;
    margin-top: 0%;
  }
  .box1{
    margin:-5px auto;
    width: 25px;
    height: 25px;
    background-color: #a4adb1;
    border-radius: 5px;
    display: inline-block;
  }
  .hook1{
    position: absolute;
    top: -29px;
    left: 64px;
    width: 50px;
    height: 50px;
    display: block !important;
  }
  .nonehook{
    display: none;
  }


/* 优良差评价 */
  .access{
    position: relative;
    width: 100%;
    height: 50px;
  }
  .access1 {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-left: 0px;
    margin-top: 0px;
  }
  .access2 {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-top: 0px;
    margin-left: 0%;
  }
.access3 {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-left: 0px;
    margin-top: 0px;
  }

  .accessBox{
    position: relative;
    margin:15px 10px;
    width: 25px;
    height: 25px;
    background-color: #a4adb1;
    border-radius: 5px;
  }
  .hookExcellent{
    position: absolute;
    top: -8px;
    left: 5px;
    width: 50px;
    height: 50px;
  }
  .hook2{
    position: absolute;
    top: -8px;
    left: 154px;
    width: 50px;
    height: 50px;
  }
  .hook3{
    position: absolute;
    top: -8px;
    left: 305px;
    width: 50px;
    height: 50px;
  }

  .nonehook{
    display: none;
  }
  .you{
    position: absolute;
    font-size: 25px;
    top: 8px;
    left: 45px;
  }
  .liang{
    position: absolute;
    font-size: 25px;
    top: 8px;
    left: 195px;
  }
  .cha{
    position: absolute;
    font-size: 25px;
    top: 8px;
    left: 344px;
  }

</style>